<%--
  Created by IntelliJ IDEA.
  User: sidongliang
  Date: 2020/9/7
  Time: 16:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>主页</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        iframe {
            border-top-width: 0px;
            border-right-width: 0px;
            border-bottom-width: 0px;
            border-left-width: 0px;
            border-top-style: inset;
            border-right-style: inset;
            border-bottom-style: inset;
            border-left-style: inset;
            border-top-color: initial;
            border-right-color: initial;
            border-bottom-color: initial;
            border-left-color: initial;
            border-image-source: initial;
            border-image-slice: initial;
            border-image-width: initial;
            border-image-outset: initial;
            border-image-repeat: initial;
        }

        .active{
            background-color: rgba(222, 245, 244, 0.89);
        }
        img {
            width: 110vw;
            height: 110vh;
            position: absolute;
            top: -5vh;
            left: -5vw;
            -o-object-fit: cover;
            object-fit: cover;
            -webkit-filter: url(#water);
            filter: url(#water);
        }

    </style>
</head>
<body>

<div class="container"><img src="/img/in.jpg" />
    <div class="col-xs-2" style="height: 100vh;">
        <ul id="left-menu" class="nav navbar-nav">

        </ul>
    </div>
    <div class="col-xs-10" style="border-left: 1px solid #eeeeee;">
        <div class="row" style="height: 40px;border-bottom: 1px solid #eeeeee;">
            <span id="page-name"></span>
        </div>
        <div id="page-continaer" style="height: calc(100vh - 40px)">
        </div>
    </div>
</div>

<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
    $(function () {
        //通过ajax 或者 jsp request属性传递
        var menuList = [
            {
                id:1,
                name:'学生管理',
                href:'pages/student/student.html',
                children:[]
            },
            {
                id:2,
                name:'班级管理',
                href:'pages/clazz/clazz.html',
                children:[]
            },
            {
                id:3,
                name:'教师管理',
                href:'pages/teacher/teacher.html',
                children:[]
            },
            {
                id:4,
                name:'专业管理',
                href:'pages/major/major.html',
                children:[]
            },
            {
                id:5,
                name:"学院管理",
                href:"pages/department/department.html"
            }
        ];

        initMenu(menuList);

    });

    /**
     * 初始化菜单
     * @param menuList
     */
    function initMenu(menuList){
        var html = '';
        for(var i=0;i<menuList.length;i++){
            html += '<li page_path="'+menuList[i].href+'">\
                        <a href="#">'+menuList[i].name+'</a>\
                    </li>';
        }
        $('#left-menu').html(html);
        $('#left-menu li').on('click', function () {
            var self = $(this);
            $('#left-menu li').removeClass('active');
            self.addClass('active');
            var pagePath = self.attr('page_path');
            $('#page-continaer').html('<iframe src="'+pagePath+'" width="100%" height="100%" style="border: 0px solid;"></iframe>');
            $('#page-name').html(self.html());
        });
        $('#left-menu li').first().click();
    }

</script>
</body>
</html>
